<template>
	<view class="maintain-page">
		<view class="maintain-part">
		    <view class="student-gather">
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
				<text>佳佳</text>
		    </view>
		</view>
		<view class="maintain-save">
			<view class="import-name">
				<input type="text" placeholder="请输入学生名称..." />
			</view>
			<view class="achieve-name">
				<button type="primary">完成</button>
			</view>
			<view class="grade-name">
				<text>一(1)班</text>
			</view>
		</view>
	</view>
</template>

<script>
  export default{
  }
</script>

<style lang="scss" scoped>
	page,.maintain-page{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.maintain-part{
			flex: 7;
			.student-gather{
				display: flex;
				flex-wrap: wrap;
				&>text{
					width: 20%;
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32upx;
				}	
			}
		}
		.maintain-save{
			flex: 3;
			position: relative;
			box-sizing: border-box;
			padding: 30upx;
			box-sizing: border-box;
			&::after{
				content: "";
				position: absolute;
				height: 2upx;
				width: 100%;
				background: #e6e6e6;
				top: 0;
				left: 0;
			}
			&>.import-name{
				width: 100%;
				height: 80upx;
				font-size: 32upx;
				position: relative;
				&::after{
					content: '';
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					border: 1px solid #bfbfbf;
					border-radius: 10px;
					-webkit-transform: scale(0.5,0.5);
					transform: scale(0.5,0.5);
					-webkit-transform-origin: top left;
				}
				&>input{
					height: 100%;
					text-align: center;
					line-height: 80upx;
				}
			}
			&>.achieve-name{
				width: 100%;
				margin: 30upx 0upx;
				border: 0;
				&>button{
					width: 100%;
					height: 80upx;
					font-size: 32upx;
					border:none;
					background: #409EFF;
				}
			}
			&>.grade-name{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				color:#409EFF;
			}
		}
	}
</style>
